<script lang="jsx" setup>
import { h, inject, provide, ref, watch } from 'vue';
import { Button as AButton, Button, Modal, message } from 'ant-design-vue';
import { EditOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { REQU, toFormData, useResp } from '@/net/requ.js';
import RoleModal from './components/role-modal.vue';
import PermsModal from './components/perms-modal.vue';

const auth = inject('auth');

const loading = ref(false);
const params = ref({
  start: 1,
  limit: 10,
  queryString: '',
  orderField: 'role_name',
  orderType: 'DESC',
});

watch(params, getRoleList, { deep: true });

const columns = ref([
  {
    title: '角色名称',
    dataIndex: 'roleName',
  },
  {
    title: '角色 code',
    dataIndex: 'roleCode',
  },
  {
    fixed: 'right',
    width: 260,
    title: '操作',
    customRender: ({ record }) => (
      <div class="op-btns icon">
        <Button
          type="link"
          onClick={() => useRoleModal(record)}>
          {{
            icon: () => <EditOutlined />,
            default: () => '编辑',
          }}
        </Button>
        <Button
          type="link"
          style="color: rgb(200,0,0);"
          onClick={() => Modal.confirm({
            content: '确定删除此角色？',
            okText: '确定',
            onOk: () => delRole(record.id.toString()),
          })}>
          {{
            icon: () => <DeleteOutlined />,
            default: () => '删除',
          }}
        </Button>
        <Button
          type="link"
          onClick={() => usePermsModal(record)}>
          {{
            icon: () => <SettingOutlined />,
            default: () => '设置权限'
          }}
        </Button>
      </div>
    ),
  },
]);

const dataSource = ref([]);
const total = ref(0);

const roleModalProps = ref({
  visible: false,
  role: null,
});

function useRoleModal(o) {
  roleModalProps.value.visible = true;
  roleModalProps.value.role = o;
}

const permsModalProps = ref({
  visible: false,
  role: null,
});

function usePermsModal(o) {
  permsModalProps.value.visible = true;
  permsModalProps.value.role = o;
}

function getRoleList() {
  loading.value = true;
  return REQU(`/api/role/list?${ new URLSearchParams(params.value) }`)
  .then(useResp({
    succ: result => {
      dataSource.value = result.data.list;
      total.value = result.data.total;  
    }
  }))
  .finally(() => loading.value = false)
}

function delRole(ids) {
  return REQU('/api/role/delete', {
    method: 'POST',
    body: toFormData({ ids }),
  })
  .then(useResp({
    succ: result => {
      message.success('删除成功');
      getRoleList();
    },
    fail: result => {
      message.error(result.message || '删除失败');
    },
  }));
}

const menuList = ref([]);
provide('menuList', menuList);

function getMenuList() {
  return REQU(`/api/menu/list?${ new URLSearchParams({
    start: 1,
    limit: 100,
    queryString: '',
    orderField: 'menu_name',
    orderType: 'DESC',
  }) }`)
  .then(useResp({
    succ: result => {
      menuList.value = result.data.list;
      return result;
    }
  }));
}

function main() {
  getRoleList();
  getMenuList();
}

main();
</script>

<template>
  <div class="role-manage">
    <a-button
      v-if="auth"
      type="primary"
      @click="() => useRoleModal()">
      + 新建角色
    </a-button>

    <a-table
      :data-source="dataSource"
      :columns="columns"
      :scroll="{ x: 1360 }"
      @change="pagination => params.start = pagination.current"
      :pagination="{
        current: params.start,
        pageSize: params.limit,
        total,
        pageSizeOptions: ['10', '20', '50'],
        showQuickJumper: true,
        showSizeChanger: true,
        position: ['bottomCenter'],
      }"
    >
    </a-table>

    <role-modal
      v-if="roleModalProps.visible"
      v-model:visible="roleModalProps.visible"
      :role="roleModalProps.role"
      @ok="() => getRoleList()">
    </role-modal>

    <perms-modal
      v-if="permsModalProps.visible"
      v-model:visible="permsModalProps.visible"
      :role="permsModalProps.role"
      @ok="() => getRoleList()">
    </perms-modal>
  </div>
</template>

<style>
.role-manage { margin: 24px; }

.role-manage .ant-table-wrapper {
  padding: 24px;
  background: #fff;
  border-radius: 6px;
}

.role-manage > .ant-btn:first-child { margin-bottom: 20px; }
</style>
